
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bannershop{
	width:870px;
	padding:0;
	height:220px;
	border:15px solid #fff;
	position:relative;
	-webkit-animation: appear 0.6s ease-in-out 1s backwards;
	-moz-animation: appear 0.6s ease-in-out 1s backwards;
	-o-animation: appear 0.6s ease-in-out 1s backwards;
	-ms-animation: appear 0.6s ease-in-out 1s backwards;
	animation: appear 0.6s ease-in-out 1s backwards;
}

.bannershop>#avar{
	border:10px solid #fff;
	box-shadow:0px 4px 4px #000;
	position:absolute;
	bottom:-25%;
	left:50px;
	width:100px;
	height:100px;
	-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.bannershop>#avar:hover{
		transform: rotate(-900deg);
    -moz-transform: rotate(-900deg);
    -webkit-transform: rotate(-900deg);
    -o-transform: rotate(-900deg);
    -ms-transform: rotate(-900deg);
	-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

.bannershop>a{
	border:10px solid #fff;
	box-shadow:0px 4px 4px #000;
	position:absolute;
	bottom:-20%;
	left:200px;
	width:560px;
	text-align:center;
	padding:20px;
	color:#fff;
	background-color:#354C8C;
	background-image: -o-linear-gradient(to left, #fff 0%, #600 100%);
	background-image: -moz-linear-gradient(to left, #fff 0%, #600 100%);
	background-image: -webkit-linear-gradient(to left, #fff 0%, #600 100%);
	background-image: -ms-linear-gradient(to left,#fff 0%, #600 100%);
	background-image: linear-gradient(to left, #fff 0%, #600 100%);
	-webkit-animation: appear 0.6s ease-in-out 1s backwards;
	-moz-animation: appear 0.6s ease-in-out 1s backwards;
	-o-animation: appear 0.6s ease-in-out 1s backwards;
	-ms-animation: appear 0.6s ease-in-out 1s backwards;
	animation: appear 0.6s ease-in-out 1s backwards;
	-webkit-transition: all 1.8s ease-in-out;
	-moz-transition: all 1.8s ease-in-out;
	-o-transition: all 1.8s ease-in-out;
	-ms-transition: all 1.8s ease-in-out;
	transition: all 1.8s ease-in-out;
}
.bannershop>a:hover{
	-webkit-transition: all 1.8s ease-in-out;
	-moz-transition: all 1.8s ease-in-out;
	-o-transition: all 1.8s ease-in-out;
	-ms-transition: all 1.8s ease-in-out;
	transition: all 1.8s ease-in-out;
}
.bannershop>.commentfacebook{
	position:absolute;
	bottom:-200px;
	left:-17px;
	text-align:center;
	color:#fff;
}
.bannershop>.commentfacebook>.fb-share-button,.fb-like{
	float:right;
	padding-right:8px;
}

.elasticstack {
	position:absolute;
	text-align:center;
	width:320px;
	height:380px;
	margin-top:0px;
	padding-left:0;
	list-style: none;
	-webkit-perspective: 600px;
	-webkit-perspective-origin: 50% 150%;
	perspective: 600px;
	perspective-origin: 50% 150%;
	-webkit-animation: appear 0.6s ease-in-out 1s backwards;
	-moz-animation: appear 0.6s ease-in-out 1s backwards;
	-o-animation: appear 0.6s ease-in-out 1s backwards;
	-ms-animation: appear 0.6s ease-in-out 1s backwards;
	animation: appear 0.6s ease-in-out 1s backwards;
}
.shopmap{
	position:fixed;
	width:100%;
	height:100%;
	/*border:20px solid #fff;*/
	left:0px ;
	top:0px;
}
.no-js .elasticstack {
	max-width: 300px;
	height: auto;
	text-align: center;
	-webkit-animation: appear 0.6s ease-in-out 1s backwards;
	-moz-animation: appear 0.6s ease-in-out 1s backwards;
	-o-animation: appear 0.6s ease-in-out 1s backwards;
	-ms-animation: appear 0.6s ease-in-out 1s backwards;
	animation: appear 0.6s ease-in-out 1s backwards;
}

.elasticstack li {
	position: absolute;
	text-align:center;
	background-color:#fff;
	z-index: 1;
	width: 300px;
	height: 320px;
	border-width: 20px 10px;
	border-style: solid;
	border-color: #fff;
	box-shadow:0px 2px 4px #000;
	opacity: 0;
	cursor: pointer;
	-webkit-transform: translate3d(0,0,-180px);
	transform: translate3d(0,0,-180px);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-animation: appear 0.6s ease-in-out 1s backwards;
	-moz-animation: appear 0.6s ease-in-out 1s backwards;
	-o-animation: appear 0.6s ease-in-out 1s backwards;
	-ms-animation: appear 0.6s ease-in-out 1s backwards;
	animation: appear 0.6s ease-in-out 1s backwards;
	
}

.no-js .elasticstack li {
	position: relative;
	text-align:center;
	display: inline-block;
	opacity: 1;
	margin: 0 auto;
	cursor: default;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-animation: appear 0.6s ease-in-out 1s backwards;
	-moz-animation: appear 0.6s ease-in-out 1s backwards;
	-o-animation: appear 0.6s ease-in-out 1s backwards;
	-ms-animation: appear 0.6s ease-in-out 1s backwards;
	animation: appear 0.6s ease-in-out 1s backwards;
}


.elasticstack li img {
	display: block;
	max-height:350px;
	-webkit-animation: appear 0.6s ease-in-out 1s backwards;
	-moz-animation: appear 0.6s ease-in-out 1s backwards;
	-o-animation: appear 0.6s ease-in-out 1s backwards;
	-ms-animation: appear 0.6s ease-in-out 1s backwards;
	animation: appear 0.6s ease-in-out 1s backwards;
}
.elasticstack li span{
	color:#b00;top:0px;left:110px;font-size:22px;text-shadow:0px 1px 3px #000;position:absolute;-webkit-transition: all 0.8s ease-in-out;text-align:center;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}
.elasticstack li span:hover{
	color:orange;-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}
.elasticstack li p {
	text-align:center;
	position:absolute;
	bottom:5px; 
	width:300px;
	background-color:orange;
	box-shadow:0px 1px 2px #000;
	color:#eee ;
	text-shadow:0px 1px 1px #000;
	height: 30px;
	text-align: center;
	font-size: 22px;
	line-height: 30px;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}

.elasticstack li p:hover{
	color:orange;
	background-color:#333;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}

.elasticstack li.animate {
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.elasticstack li.move-back {
	/* http://matthewlein.com/ceaser/ */
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.470, 1); /* older webkit */
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.470, 1.515);
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.470, 1.515);
}


/* --------------------------------------------------------------------------------------------------- */
.box-bar-none{
	width:185px;
	height:185px;
	float:left;
	border:20px solid rgba(22,22,22,0);
}
.box-bar{
	width:185px;
	height:185px;
	float:left;
	border:20px solid #b00;
	box-shadow:0px 1px 5px #000;
	background-color:rgba(22,22,22,0.8);
/*	transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
*/
}
img.box-bar-img{
	width:125px;
	height:145px;
	float:left;
	margin-left:18px;
	box-shadow:0px 1px 2px #000;
	border:20px solid #fff;
	transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
	-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
img.box-bar-img:hover{
	transform: rotate(-870deg);
    -moz-transform: rotate(-870deg);
    -webkit-transform: rotate(-870deg);
    -o-transform: rotate(-870deg);
    -ms-transform: rotate(-870deg);
	-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.banner>img:hover{
	transform: rotate(-7200deg);
    -moz-transform: rotate(-7200deg);
    -webkit-transform: rotate(-7200deg);
    -o-transform: rotate(-7200deg);
    -ms-transform: rotate(-7200deg);
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}

.banner>img{
	z-index:999999;border-radius:1px;opacity:2;position:absolute;top:20px;right:170px;border:10px solid #ddd;box-shadow:0px 1px 3px #000;
	-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.banner>a:hover{
	color:#af4;
	transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
	-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}

.banner>a{
	position:absolute;
	bottom:70px;
	right:130px;
	font-size:80px;
	text-shadow:0px 2px 4px #000;
	z-index:99999999;
	color:orange;
	-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}